import React, { useRef, useState } from 'react'
import './app.css'
import axios from 'axios'
export default function App() {
  const inputRef = useRef(null)
  const [list, setList] = useState([])
  const send = () => {
    const value = inputRef.current.value
    if (!value) {
      return
    }
    setList(prev => [...prev, {
      role: 'user',
      content: value
    }])
    inputRef.current.value = ''
    axios.post('http://localhost:3000/chat', {
      role: 'user',
      content: value
    }).then(res => {
      console.log(res.data.data.message)
      setList(prev => [...prev, {
        role: 'bot',
        content: res.data.data.message
      }])
      
    })
    
  }
  return (
    <div className='container'>
      <div className='header'>
        <h1>Chat Box</h1>
      </div>

      <div className="content">

        <div className="bot">
          AI: <span>您好！我是您的 AI 智能助手，可以帮你解答问题，编写代码，进行创作等。请问有什么可以帮您？</span>
        </div>

        <div className="chat">
          {/* <div className="user question item">
            me: 
            <span>你好</span>
          </div>
          <div className="bot answer item">
            AI:
            <span>你好！有什么我可以帮助您的吗？</span>
          </div> */}
          {
            list.map((item, index) => {
              return (
                <div key={index} className={item.role === 'user' ? 'user question item' : 'bot answer item'}>
                  <span>{item.role === 'user' ? 'me' : 'AI'}: </span>
                  <span>{item.content}</span>
                </div>
              )
            })
          }
        </div>

      </div>

      <div className="input">
        <input ref={inputRef} type="text" placeholder="请输入" />
        <button onClick={send}>发送</button>
      </div>

    </div>
  )
}